import React from "react";
import { loginBackGround } from "@/constants/type";
import { LockOutlined, UserOutlined, SmileOutlined } from "@ant-design/icons";
import { Button, Form, Input } from "antd";
import styles from "./index.module.scss";
import { register } from "@/api/api";
import { goto } from "@/utils";

const Register: React.FC = () => {
  const onFinish = async (values: any) => {
    const { account, password, nickname } = values;
    const res = await register(account, password, nickname);
    const { code } = res.data;
    if (code === 200) goto("login", 1000);
  };

  return (
    <div
      style={{ backgroundImage: `url(${loginBackGround})` }}
      className={styles.container}
    >
      <div className={styles.wrapper}>
        <Form
          name="normal_login"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="account"
            rules={[{ required: true, message: "请输入账号" }]}
            style={{ marginBottom: "20px" }}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="账号"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
            style={{ marginBottom: "20px" }}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item
            name="nickname"
            rules={[{ required: true, message: "请输入昵称" }]}
            style={{ marginBottom: "20px" }}
          >
            <Input
              prefix={<SmileOutlined className="site-form-item-icon" />}
              type="nickName"
              placeholder="昵称"
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={styles.loginBtn}
            >
              立即注册
            </Button>
          </Form.Item>
          <Form.Item style={{ marginBottom: "0px" }}>
            <p className={styles.contactMe}>
              2022级 施涛 联系邮箱 19865329848@163.com
            </p>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Register;
